---
import { render } from 'astro:content';
import Entry from '@eratic/core/layouts/Entry.astro';
import Figure from '@eratic/core/components/Figure.astro';
import { mdxComponents } from '@eratic/core/components/mdx';
import { prettyHost } from '@eratic/core';
import { allFavs, favPath, favKicker } from '../lib/entries';

export async function getStaticPaths() {
	const favs = await allFavs();
	return favs.map((entry) => ({
		params: { slug: entry.id },
		props: { entry },
	}));
}

const { entry } = Astro.props;
const { Content } = await render(entry);
const { rating, link, cover, coverAlt, title } = entry.data;
---

<Entry
	site="fav"
	title={title}
	summary={entry.data.summary}
	path={favPath(entry)}
	pubDate={entry.data.pubDate}
	updatedDate={entry.data.updatedDate}
	tags={entry.data.tags}
	canvas={entry.data.canvas}
	theme={entry.data.theme}
	image={cover?.src}
	kicker={favKicker(entry)}
>
	{cover && <Figure src={cover} alt={coverAlt ?? title} width="wide" priority />}

	{
		rating && (
			<p class="rating" aria-label={`Rated ${rating} out of 5`}>
				<span aria-hidden="true">{'●'.repeat(rating) + '○'.repeat(5 - rating)}</span>
			</p>
		)
	}

	<Content components={mdxComponents} />

	{
		link && (
			<p class="find-it">
				<a href={link} rel="noopener noreferrer">
					{prettyHost(link)} ↗
				</a>
			</p>
		)
	}
</Entry>

<style>
	.rating {
		font-size: var(--step-0);
		letter-spacing: 0.2em;
		color: var(--accent);
		margin-block-end: var(--space-m);
	}

	.find-it {
		margin-block-start: var(--space-l);
		font-family: var(--font-ui);
		font-size: var(--step--1);
	}
</style>